<template>
  <div class="orderListContainer">
    <i-icon class='header-icon' type="addressbook" size='24'  color='#1d7ebf' @click='toDetail'/>
    <div class='info-card-wrap'>
        <scroll-view  style="height:100%" :scroll-y="true" @scrolltolower="scrolltolower">
            <div class='card-wrap' v-if='notice'>
                <div class='card-line'>
                    <div>标题：</div>
                    <div class='value'>{{notice.title}}</div>
                </div>
                <div class='card-line'>
                    <div>时间：</div>
                    <div class='value'>{{notice.startTime}}</div>
                </div>
                <div class='card-line' v-if='notice.filePath'>
                    <div>附件：</div>
                    <div class='value'>{{notice.fileName}}<span class='blue' @click='download(notice.filePath)'>下载</span></div>
                </div>
                <div class='card-line'>
                    <div>内容：</div>
                    <div class='value'>{{notice.detail}}</div>
                </div>
            </div>
        </scroll-view>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script type="text/javascript">
import DeviceCard from '@/components/device_card/device_card.vue';
import { mapState } from 'vuex';
import { $Toast } from '@/../static/iview/base/index';
export default {
  data() {
    return {
      id:null,
      flag:0,
      notice:null
    }
  },
  beforeMount(){
      var query = this.$root.$mp.query;
      this.id = query.id;
      this.flag = query.flag;
      this.queryNotice()
  },
  methods:{
      queryNotice(){
          var data={
            ukey:this.userInfo.ukey
          }
          this.$http.post({
            url:'/notice/findById',
            data:{
                ukey:this.userInfo.ukey,
                id:this.id,
                flag:this.flag
            }
           }).then((res)=>{
                if(res.s==0){
                    this.notice = res.i.Data;
                    if(this.notice.filePath) {
                        var arr = this.notice.filePath.split('/');
                        this.notice.fileName = arr[arr.length-1];
                    }
                }
           }).catch((e)=>{
                console.log('请求失败',e)
           })
      },
      toDetail(){
          wx.navigateTo({
            url:`/pages/subordinate_manage/main?type=1&noticeId=${this.notice.id}`
          })
      },
      download(url){
          wx.downloadFile({
            url: this.imgHost+url,
            success: function (res) {
                const tempFilePath = res.tempFilePath;
                // 保存文件
                wx.saveFile({
                    tempFilePath,
                    success: function (res) {
                        $Toast({
                            content: '摩派：下载完成'
                        });
                        // 打开文件
                        /*const savedFilePath = res.savedFilePath; 
                        wx.openDocument({
                            filePath: savedFilePath,
                            success: function (res) {
                                console.log('打开文档成功')
                            },
                        }); */
                    },
                    fail: function (err) {
                        console.log('保存失败：', err)
                    }
                });
            },
            fail: function (err) {
                console.log('下载失败：', err);
            },
            });
      }
  },    
  components: {
    DeviceCard
  },
  computed:{
    ...mapState(['userInfo','imgHost'])
  }
}
</script>

<style lang='less'>
page{
    background:#eef7fd;
    height:100%;
}
.orderListContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .header-icon{
        position: absolute;
        right:54rpx;
        top:34rpx;
        z-index: 2;
    }
    .info-card-wrap{
        height: 50rpx;
        flex:1;
        background: #fff;
        margin: 20rpx 30rpx;
        border:1px solid #e8eae9;
        border-radius: 8rpx;
        .card-wrap{
            .card-line{
                display: flex;
                height: 70rpx;
                margin: 0 20rpx;
                justify-content: space-between;
                align-items: center;
                color:#7b7b7b;
                .value{
                    flex:1;
                    .blue{
                        color: #1d7ebf;
                        margin-left:20rpx;
                    }
                }
                .font-sm{
                    font-size:28rpx;
                }
            }
        }
    }
}
</style>
